import { __experimentalHStack as HStack, __experimentalText as Text } from '@wordpress/components';

interface OwnerDisplayProps {
	owner: string;
	color?: string;
}

export const OwnerDisplay = ( { owner, color = '#3b3b3b' }: OwnerDisplayProps ) => {
	return (
		<HStack spacing={ 1 } alignment="left">
			<svg
				width="16"
				height="16"
				viewBox="0 0 16 16"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					fillRule="evenodd"
					clipRule="evenodd"
					d="M8.01652 1.33325C4.34385 1.33325 1.36719 4.30992 1.36719 7.98259C1.36719 10.9199 3.27185 13.4126 5.91452 14.2926C6.24719 14.3526 6.36719 14.1479 6.36719 13.9719C6.36719 13.8139 6.36185 13.3953 6.35985 12.8413C4.50985 13.2426 4.11919 11.9493 4.11919 11.9493C3.81785 11.1813 3.38119 10.9766 3.38119 10.9766C2.77785 10.5639 3.42719 10.5733 3.42719 10.5733C4.09519 10.6199 4.44519 11.2586 4.44519 11.2586C5.03852 12.2746 6.00252 11.9813 6.37985 11.8113C6.44052 11.3813 6.61385 11.0879 6.80319 10.9219C5.32719 10.7546 3.77519 10.1839 3.77519 7.63525C3.77519 6.91059 4.03452 6.31592 4.45785 5.85192C4.39052 5.68325 4.16052 5.00659 4.52385 4.09192C4.52385 4.09192 5.08185 3.91259 6.35185 4.77259C6.89425 4.62503 7.45375 4.54972 8.01585 4.54859C8.57798 4.5495 9.1375 4.62482 9.67985 4.77259C10.9505 3.91192 11.5079 4.09192 11.5079 4.09192C11.8712 5.00659 11.6432 5.68325 11.5739 5.85192C12.0005 6.31592 12.2565 6.90992 12.2565 7.63525C12.2565 10.1906 10.7032 10.7519 9.22185 10.9166C9.45852 11.1219 9.67185 11.5273 9.67185 12.1473C9.67185 13.0366 9.66385 13.7539 9.66385 13.9719C9.66385 14.1499 9.78252 14.3566 10.1219 14.2913C12.7632 13.4099 14.6659 10.9193 14.6659 7.98259C14.6659 4.30992 11.6892 1.33325 8.01652 1.33325Z"
					fill="#2C2A29"
				/>
			</svg>
			<Text size="small" style={ { color } }>
				{ owner }
			</Text>
		</HStack>
	);
};
